<template>
  <div class="welcome-page" @mousedown="startWarp" @mouseup="stopWarp">
    <!-- Canvas星空动画 -->
    <canvas ref="starCanvas" class="star-canvas"></canvas>

    <div class="welcome-content">
      <div>
        <!-- Logo带光晕效果 -->
        <div class="logo-container">
          <div class="logo-glow"></div>
          <img class="koala-logo" src="@/assets/logo2.png"  alt="logo" />
        </div>

        <!-- 标题和副标题 - 添加鼠标悬停事件 -->
        <div class="title-area">
          <BlurReveal :duration="0.5" :delay="0.2">
            <h1 class="welcome-title">Hello, I'm Koala, Nice to meet you!</h1>
            <p class="welcome-subtitle">
              Koala致力于实现全任务场景下自组织、自编程、自部署，加速AGI普惠人类
            </p>
          </BlurReveal>
        </div>

        <!-- 功能卡片 -->
        <div class="feature-grid">
          <div class="feature-item" @click="handleGo" v-slide-in @mouseenter="accelerateStars" @mouseleave="decelerateStars">
            <div>
              <h3>自组织系统🌐</h3>
              <p>智能协调任务资源，动态组建最优工作流，实现系统自我演化</p>
            </div>
            <div class="hover-content">
              <span>即刻体验</span>
              <span class="arrow">→</span>
            </div>
          </div>
          <div class="feature-item" @click="handleGo" v-slide-in @mouseenter="accelerateStars" @mouseleave="decelerateStars">
            <!-- <div class="feature-icon">💻</div> -->
            <h3>自编程引擎💻</h3>
            <p>理解自然语言意图，自主生成/迭代代码，具备持续自我优化能力</p>
            <div class="hover-content">
              <span>即刻体验</span>
              <span class="arrow">→</span>
            </div>
          </div>
          <div class="feature-item" @click="handleGo" v-slide-in @mouseenter="accelerateStars" @mouseleave="decelerateStars">
            <!-- <div class="feature-icon">🚀</div> -->
            <h3>自部署框架🚀</h3>
            <p>自动配置运行环境，智能选择部署策略，实现系统自我交付</p>
            <div class="hover-content">
              <span>即刻体验</span>
              <span class="arrow">→</span>
            </div>
          </div>
        </div>

        <!-- Spline 模型 - 移到最上方层级 -->
        <Spline scene="https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splinecode" class="spline-model" />
      </div>
    </div>
  </div>
</template>

<script setup>
import vSlideIn from '@/order/slide'
import Spline from "@/components/ui/Spline.vue";
import BlurReveal from "@/components/ui/BlurReveal.vue";
import { ref, onMounted, onBeforeUnmount } from 'vue';

// 星空动画设置
const starCanvas = ref(null);
const warpSpeed = ref(0.5);  // 初始速度更慢
const targetWarpSpeed = ref(0.5); // 目标速度
const isWarping = ref(false);
const mouseX = ref(0);
const mouseY = ref(0);
let ctx;
let stars = [];
let animationFrameId;
let canvasWidth = 0;
let canvasHeight = 0;
let activeCardCount = 0; // 跟踪活动卡片数量

// 星星类
class Star {
  constructor() {
    this.reset();
  }

  reset() {
    // 3D坐标
    this.x = (Math.random() - 0.5) * 2000;
    this.y = (Math.random() - 0.5) * 2000;
    this.z = Math.random() * 2000;

    // 颜色和大小 - 初始状态更小
    this.radius = Math.random() * 0.8 + 0.2;  // 星星更小
    this.color = `rgba(255, 255, 255, ${Math.random() * 0.7 + 0.2})`;

    // 尾迹
    this.trail = [];
    this.trailLength = Math.floor(Math.random() * 5) + 3;
  }

  update() {
    // 移动星星（z轴方向）
    this.z -= warpSpeed.value * 5;

    // 添加鼠标位置影响方向
    if (isWarping.value) {
      const centerX = canvasWidth / 2;
      const centerY = canvasHeight / 2;
      const mouseXRatio = (mouseX.value - centerX) / centerX;
      const mouseYRatio = (mouseY.value - centerY) / centerY;

      this.x += mouseXRatio * warpSpeed.value * 2;
      this.y += mouseYRatio * warpSpeed.value * 2;
    }

    // 保存尾迹点
    if (warpSpeed.value > 2) {
      this.trail.push({
        x: this.x,
        y: this.y,
        z: this.z
      });

      if (this.trail.length > this.trailLength) {
        this.trail.shift();
      }
    } else {
      this.trail = [];
    }

    // 如果星星超出视野，重置它
    if (this.z < 1) {
      this.reset();
    }
  }

  draw() {
    // 透视投影计算
    const perspective = 300;
    const projectedX = (this.x / (this.z / perspective)) + canvasWidth / 2;
    const projectedY = (this.y / (this.z / perspective)) + canvasHeight / 2;

    // 大小基于z轴位置
    const size = (1 - this.z / 2000) * this.radius * 2;
    const opacity = 1 - this.z / 2000;

    // 绘制尾迹
    if (this.trail.length > 1 && warpSpeed.value > 2) {
      ctx.beginPath();
      ctx.strokeStyle = `rgba(90, 127, 255, ${opacity * 0.6})`;
      ctx.lineWidth = size / 2;

      let firstPoint = true;
      for (const point of this.trail) {
        const trailX = (point.x / (point.z / perspective)) + canvasWidth / 2;
        const trailY = (point.y / (point.z / perspective)) + canvasHeight / 2;

        if (firstPoint) {
          ctx.moveTo(trailX, trailY);
          firstPoint = false;
        } else {
          ctx.lineTo(trailX, trailY);
        }
      }

      ctx.lineTo(projectedX, projectedY);
      ctx.stroke();
    }

    // 绘制星星
    ctx.beginPath();
    ctx.arc(projectedX, projectedY, size, 0, Math.PI * 2);

    // 星星颜色
    const gradient = ctx.createRadialGradient(
        projectedX, projectedY, 0,
        projectedX, projectedY, size
    );

    gradient.addColorStop(0, 'rgba(255, 255, 255, ' + opacity + ')');
    gradient.addColorStop(0.8, 'rgba(90, 127, 255, ' + opacity * 0.8 + ')');
    gradient.addColorStop(1, 'rgba(90, 127, 255, 0)');

    ctx.fillStyle = gradient;
    ctx.fill();
  }
}

const emit = defineEmits(['go'])
const handleGo = () => {
  emit('go')
}

// 初始化星空
const initStarfield = () => {
  const canvas = starCanvas.value;
  ctx = canvas.getContext('2d');

  // 设置canvas为全屏
  resizeCanvas();

  // 创建星星
  stars = [];
  for (let i = 0; i < 800; i++) {
    stars.push(new Star());
  }

  // 开始动画循环
  animateStars();
};

// 调整canvas大小
const resizeCanvas = () => {
  const canvas = starCanvas.value;
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  canvasWidth = canvas.width;
  canvasHeight = canvas.height;
};

// 动画循环
const animateStars = () => {
  ctx.fillStyle = 'rgba(19, 20, 32, 0.2)';
  ctx.fillRect(0, 0, canvasWidth, canvasHeight);

  // 平滑过渡速度
  if (Math.abs(warpSpeed.value - targetWarpSpeed.value) > 0.05) {
    if (warpSpeed.value < targetWarpSpeed.value) {
      warpSpeed.value += (targetWarpSpeed.value - warpSpeed.value) * 0.1;
    } else {
      // 减速更快
      warpSpeed.value -= (warpSpeed.value - targetWarpSpeed.value) * 0.3;
    }
  } else {
    warpSpeed.value = targetWarpSpeed.value;
  }

  // 更新并绘制每颗星星
  for (const star of stars) {
    star.update();
    star.draw();
  }

  // 继续动画循环
  animationFrameId = requestAnimationFrame(animateStars);
};

// 鼠标事件处理
const startWarp = (e) => {
  isWarping.value = true;
  updateMousePosition(e);
};

const stopWarp = () => {
  isWarping.value = false;
};

const updateMousePosition = (e) => {
  mouseX.value = e.clientX;
  mouseY.value = e.clientY;
};

// 功能卡片鼠标交互 - 改进版
const accelerateStars = () => {
  activeCardCount++;
  targetWarpSpeed.value = 8;
};

const decelerateStars = () => {
  activeCardCount--;
  // 仅当没有活动卡片时才减速
  if (activeCardCount <= 0) {
    activeCardCount = 0;
    targetWarpSpeed.value = 0.5;
    // 强制更快减速
    warpSpeed.value = warpSpeed.value * 0.8;
  }
};

// 组件挂载和卸载
onMounted(() => {
  initStarfield();
  window.addEventListener('resize', resizeCanvas);
  window.addEventListener('mousemove', updateMousePosition);
});

onBeforeUnmount(() => {
  cancelAnimationFrame(animationFrameId);
  window.removeEventListener('resize', resizeCanvas);
  window.removeEventListener('mousemove', updateMousePosition);
});
</script>

<style scoped>
/* 整体页面样式 */
.welcome-page {
  width: 100%;
  border-radius: 20px;
  height: 100%;
  background: #131420;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e4e4e4;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3) inset;
  cursor: default;
}

/* Canvas星空 */
.star-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 内容容器 */
.welcome-content {
  max-width: 1000px;
  width: 100%;
  text-align: center;
  height: 100%;
  position: relative;
  z-index: 1;
  padding: 0 20px;
  pointer-events: none;
  /* 允许点击穿透到Canvas */
}

/* Spline模型样式 - 调整为最高层级 */
.spline-model {
  margin-top: 0;
  position: relative;
  top: -100px;
  transform: scale(0.7);
  width: 1000px;
  z-index: 100;
  /* 确保高于所有其他元素 */
  pointer-events: auto;
  /* 启用交互 */
}

/* 标题区域 */
.title-area {
  pointer-events: auto;
  padding: 10px;
  border-radius: 16px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 5;
}

/* Logo 容器 */
.logo-container {
  margin-top: 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  position: relative;
  pointer-events: auto;
  z-index: 5;
}

/* Logo光晕效果 */
.logo-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(90, 127, 255, 0.4) 0%, rgba(90, 127, 255, 0) 70%);
  border-radius: 50%;
  animation: pulse 4s infinite alternate;
}

/* Koala Logo */
.koala-logo {
  width: 120px;
  height: 100px;
  filter: drop-shadow(0 0 15px rgba(90, 127, 255, 0.7));
  position: relative;
  z-index: 2;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

/* 欢迎标题 */
.welcome-title {
  font-size: 38px;
  font-weight: 700;
  background: linear-gradient(135deg, #5a7fff 0%, #7a9eff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
  text-shadow: 0 0 20px rgba(90, 127, 255, 0.3);
  letter-spacing: 0.5px;
}

/* 欢迎副标题 */
.welcome-subtitle {
  font-size: 18px;
  color: #b8b8b8;
  margin-bottom: 40px;
  line-height: 1.5;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* 功能网格 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  pointer-events: auto;
  position: relative;
  z-index: 5;
}

/* 功能项 */
.feature-item {
  background: linear-gradient(145deg, rgba(37, 39, 53, 0.8), rgba(42, 44, 60, 0.8));
  padding: 25px;
  border-radius: 16px;
  border: 1px solid rgba(90, 127, 255, 0.15);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
}

.feature-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(90, 127, 255, 0.3);
  border-color: rgba(90, 127, 255, 0.3);
  cursor: pointer;
}

/* 功能图标 */
.feature-icon {
  font-size: 32px;
  margin-bottom: 15px;
  background: linear-gradient(135deg, #5a7fff 0%, #7a9eff 100%);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 5px 15px rgba(90, 127, 255, 0.4);
}

/* 功能标题 */
.feature-item h3 {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12px;
}

/* 功能描述 */
.feature-item p {
  font-size: 15px;
  color: #b0b0b0;
  line-height: 1.6;
}

/* 悬浮内容样式 */
.hover-content {
  position: absolute;
  inset: 0;
  background: rgba(37, 39, 53, 0.9);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 16px;
}

/* 鼠标悬浮时显示遮罩 */
.feature-item:hover .hover-content {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* 箭头样式 */
.arrow {
  font-size: 22px;
  transition: transform 0.3s ease;
  color: #5a7fff;
}

.feature-item:hover .arrow {
  transform: translateX(8px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .welcome-title {
    font-size: 30px;
  }

  .welcome-subtitle {
    font-size: 16px;
  }

  .koala-logo {
    width: 80px;
    height: 80px;
  }

  .feature-item {
    padding: 20px;
  }

  .spline-model {
    transform: scale(0.4);
    width: 100%;
  }
}
</style>
